@extends('layouts.buz.layout', ['header_active' => 'member'])

@section('sidebar')
    @include('layouts.buz.sidebar.member', ['active' => 'remit'])
@endsection()

@section('content')
    {{--结算管理--}}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                结算信息
                <button type="button" class="btn btn-default right updateInfo" data-i="0">修改</button>
            </h4>
        </div>
        <div class="panel-body">
            <form class="form-horizontal member" role="form" id="settlemetForm">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">开户名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="username">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">账户类型</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input type="radio" value="0" name="classify" id="personRadio" />&nbsp;个人
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="1" name="classify" />&nbsp;企业
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">开户账号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="account">
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">开户银行</label>
                            <div class="col-sm-8">
                                <select class="form-control col-sm-3" name="category" id="category">

                                </select>
                            </div>
                        </div>
                    </div>
                    {{--<div class="col-sm-6">--}}
                        {{--<div class="form-group">--}}
                            {{--<label for="firstname" class="col-sm-3 control-label">是否默认</label>--}}
                            {{--<div class="col-sm-8">--}}
                                {{--<label class="radio-inline">--}}
                                    {{--<input type="radio" value="0" name="is_default" checked="checked" />&nbsp;否--}}
                                {{--</label>--}}
                                {{--<label class="radio-inline">--}}
                                    {{--<input type="radio" value="1" name="is_default" />&nbsp;是--}}
                                {{--</label>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                </div>
                <div class="row">

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label">开户省市</label>

                            <div class="col-sm-4">
                                <select class="form-control" id ="SelProvince" >
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <select class="form-control" id ="SelCity" name="city_id" >

                                </select>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">分支行</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="branch">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row companyAttr" id="bank_number">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">联行号</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="number">
                            </div>
                            <div class="col-sm-2">
                                <a class="btn btn-default" href="http://www.lianhanghao.com/" target="_blank" role="button">查询联行号</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row editRow" style="display: none;">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label textRight">验证码：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="sms_code">
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-info" id="SendCode">发送验证码</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row editRow" style="display: none;">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label textRight">交易密码：</label>
                            <div class=" col-sm-5">
                                <input type="password" class="form-control" name="trade_pwd">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label"></label>
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-primary" onclick="confirmSettlement()">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    @endsection()
@section('bottom_js')
    <script src="{{asset('js/buz/template-web.js')}}"></script>
    <script id="provinceOption" type="text/html">
        @{{each data  value }}
        @{{ if provinceId == value.id }}
        <option value="@{{ value.id}}" selected>@{{ value.name}}</option>
        @{{ /if}}
        <option value="@{{ value.id}}">@{{ value.name}}</option>
        @{{/each}}
    </script>
    <script id="cityOption" type="text/html">
        <option value="" class="default">请选择市</option>
        @{{each data  value }}
        <option value="@{{ value.id}}">@{{ value.name}}</option>
        @{{/each}}
    </script>

    <script id="bankOption" type="text/html">
        @{{each data  value }}
        @{{ if bank == value.id }}
        <option value="@{{ value.id}}" selected>@{{ value.name}}</option>
        @{{ /if}}
        <option value="@{{ value.id}}">@{{ value.name}}</option>
        @{{/each}}
    </script>
    <script>
        $('#settlemetForm').bootstrapValidator({
            message: '这个值没有被验证',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '开户名不能为空',
                    validators: {
                        notEmpty: {
                            message: '开户名不能为空'
                        }

                    }
                },
                classify: {
                    message: '账户类型不能为空',
                    validators: {
                        notEmpty: {
                            message: '账户类型不能为空'
                        }
                    }
                },
                account: {
                    message: '开户账号不能为空',
                    validators: {
                        notEmpty: {
                            message: '开户账号不能为空'
                        }
                    }
                },
                category: {
                    message: '银行类型不能为空',
                    validators: {
                        notEmpty: {
                            message: '银行类型不能为空'
                        }
                    }
                },
                city_id: {
                    message: '省市不能为空',
                    validators: {
                        notEmpty: {
                            message: '省市不能为空'
                        }
                    }
                },
                branch: {
                    message: '开户分支行不能为空',
                    validators: {
                        notEmpty: {
                            message: '开户分支行不能为空'
                        }
                    }
                },
                number: {
                    message: '联行号不能为空',
                    validators: {
                        excluded: function () {
                            var classify = $('input[name="classify"]').val()
                            if (classify == 1) {
                                return true;
                            }
                            return false;
                        },
                        notEmpty: {
                            message: '联行号不能为空'
                        }
                    }
                },
                sms_code: {
                    message: '验证码不能为空',
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                },
//                login_pwd: {
//                    message: '登录密码不能为空',
//                    validators: {
//                        notEmpty: {
//                            message: '登录密码不能为空'
//                        }
//                    }
//                },
                trade_pwd: {
                    message: '交易密码不能为空',
                    validators: {
                        notEmpty: {
                            message: '交易密码不能为空'
                        }
                    }
                }
            }
        });
        function confirmSettlement() {
            var bootstrapValidator = $('#settlemetForm').data("bootstrapValidator");
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
                var data = $("#settlemetForm").serialize();
                $.ajax({
                    url: "/api/profile/remit",
                    data: data,
                    type: 'put',
                    success:function(data){
                        console.log(data);
                        if(filterAjaxData(data)){
                            window.location.reload();
//                        }else {
//                            showMsg(data.message);
                        }

                    }

                });
            }
        }
        $(function () {
            $("form input,form select,form button").attr("disabled",true);
            $(".updateInfo").click(function () {
                $("form input,form select,form button").attr("disabled",false);
//                $("#personRadio").attr("disabled",true);
                $(".editRow").show();
            });
            $("input[type='radio'][name='classify']").click(function () {
                var val = $(this).val();
                if (val == 0) {
                    $("#bank_number").hide();
                } else {
                    $("#bank_number").show();
                }
            });
            $("#SendCode").click(function(){
                var that = $(this);
                $.ajax({
                    url: "/api/tool/sms",
                    data: {type: 5},
                    type: 'post',
                    success:function(data){
                        if(data.code == 0){
                            showMsg("发送成功");
                            setTime(that);
                        }else {
                            showMsg(data.message);
                        }
                    }
                });
            });
        })
        $.ajax({
            url: "/api/profile/remit",
            type: 'get',
            async: false,
//            beforeSend: function () {
//                // 加载loading
//                $("body").append("<div class='yhy-loading'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></div>");
//            },
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var thatData = data.data;
                    if (thatData.classify == 1) {
                        $("#bank_number").show();
                    } else {
                        $("#bank_number").hide();
                    }
                    $("input[name=classify][value='"+thatData.classify+"']").attr("checked",true);
                    $("input[name=username]").val(thatData.username);
                    $("input[name=account]").val(thatData.account);
                    $("input[name=branch]").val(thatData.branch);
                    $("input[name=number]").val(thatData.number);
                    var bank = thatData.category;
                    var provinceID = thatData.city.parent;
                    var cityID = thatData.city.id;
                    cityOption ='<option value="'+cityID+'" selected>'+thatData.city.city+'</option>';
                    $("#SelCity").append(cityOption);

                    $.ajax({
                        url: "/api/tool/banks",
                        type: 'get',
                        success: function (data) {
                            if (filterAjaxData(data)) {
                                console.log(data);
                                data.bank = bank;
                                var SelBusiTypeHtml = template('bankOption', data);
                                $("#category").append(SelBusiTypeHtml);

                            } else {
                                showMsg(data.message);
                            }
                        }

                    });
                    $.ajax({
                        url: "/api/tool/cities",
                        type: 'get',
                        success: function (data) {
                            if (filterAjaxData(data)) {
                                console.log(data);
                                data.provinceId= provinceID;
                                var provinceHtml = template('provinceOption', data);
                                $("#SelProvince").append(provinceHtml);

                            } else {
                                showMsg(data.message);
                            }
                        }
                    });

                } else {
                    showMsg(data.message);
                }
            }
//            complete: function () {
//                $(".yhy-loading").remove();
//            }
        });
        $("#SelProvince").change(function () {
            var _id = $(this).val();

            console.log(_id);
            $.ajax({
                url: "/api/tool/cities?parent=" + _id,
                type: 'get',
                success: function (data) {
                    if (filterAjaxData(data)) {
                        console.log(data);
                        $("#SelCity").attr("disabled", false);
                        var cityHtml = template('cityOption', data);
//                        $("#SelCity .default").siblings().remove();
                        $("#SelCity").html(cityHtml);

                    } else {
                        showMsg(data.message);
                    }
                }
            })
        });
    </script>
@endsection()
